<template>
    <div class="dropdown">
        <div class="btn"
             @click="showBody"
             @mouseover="showBody">{{title}}</div>
        <div class="body"
             v-show="show">
            <ul>
                <li v-for="(item,index) in option.list"
                    :key="index"
                    @click="handleClick(item)">{{item.text}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: "dropdown",
    props: {
        option: {
            type: Object,
            default () {
                return {
                    title: "下拉菜单",
                    name: "name",
                    list: [
                        { text: "分类1" },
                        { text: "分类2" },
                        { text: "分类3" }
                    ]
                };
            }
        },
        changeTitle: {
            type: String,
            default: 'true'
        }
    },
    data () {
        return {
            show: true,
            title: this.option.title
        };
    },

    methods: {
        handleClick (item) {
            this.show = false;
            if (this.changeTitle === 'true') {
                this.title = item.text;
            }
            this.$emit("choose", {
                item,
                option: this.option
            });
        },
        showBody () {
            this.show = true;
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
ul,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dropdown {
    position: relative;
    z-index: 2;
    display: inline-block;
    user-select: none;

    .btn {
        cursor: pointer;
        color: #61a0a8;
        font-weight: bold;
    }

    .body {
        display: none;
        position: absolute;
        z-index: 60;
        max-height: 60vh;
        overflow-y: auto;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        padding: 8px 0;
        ul {
            li {
                cursor: pointer;
                white-space: nowrap;
                padding: 0 15px;
                height: 30px;
                line-height: 30px;
                font-size: 14px;

                &:hover {
                    background: #e6f7ff;
                }
            }
        }
    }

    &:hover {
        .body {
            display: block;
        }
    }
}
</style>
